<template>
<div class="remote-storage views-container">
    <div class="wlm-form">
        <div class="wlm-form-hearder">跳转小程序</div>
        <div class="wlm-form-header-radio">
            <div class="wlm-form-notice warning" style="margin-left: -41px;margin-top: -10px;margin-bottom: 0;">
                <div>
                    温情提示：小程序跳转小程序，需要先添加小程序Appid，最多可添加10个跳转小程序，每次修改需要重新发布小程序方可生效
                </div>
            </div>
        </div>
        <section>
            <div class="wlm-form-content">
                <el-form ref="publish" :model="formFormatData.formData" size="small" label-width="140px" class="retail-form" label-position="right">
                    <el-form-item label="小程序Appid" v-for="(appid, index) in formFormatData.formData.appid" :prop="'appid.' + index + '.value'" :rules="{required: true, message: 'appid不能为空', trigger: 'blur'}" :key="appid.key">
                        <div class="flex-row">
                            <el-input placeholder="要跳转的小程序Appid" v-model="appid.value">
                            </el-input>
                            <el-input style="margin:0 20px;" placeholder="要跳转的小程序名称" v-model="appid.name">
                            </el-input>
                            <el-button @click="rmvAppid(index)">删除</el-button>
                        </div>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="text" @click="addAppid"><i class="el-icon-plus"></i>添加</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </section>
    </div>
    <div class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="formFormatSubmit" type="primary">保存</el-button>
    </div>
</div>
</template>

<script>
import {
  getWxAppIdInfo,
  setWxAppIdInfo
} from '@/api/channel'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'RemoteStorage',
  components: {

  },
  directives: {

  },
  data() {
    return {
      formFormatData: {
        key: ['publish'],
        api: {
          editForm: {
            api: getWxAppIdInfo,
            params: {
              always: true
            }
          },
          submitForm: setWxAppIdInfo
        },
        formData: {
          appid: []
        },
        rules: {

        }
      }
    }
  },
  methods: {
    addAppid() {
      const appidList = this.formFormatData.formData.appid
      if (appidList.length < 10) {
        this.formFormatData.formData.appid.push({
          value: '',
          key: Date.now()
        })
      } else {
        this.$message.error('最多可添加10个跳转小程序~!')
      }
    },
    rmvAppid(index) {
      if (index !== -1) {
        this.formFormatData.formData.appid.splice(index, 1)
      }
    }
  }
}
</script>

<style lang="scss" scope>

</style>
